<template>
  <!-- 个人信息 Begin -->
  <div class="flex flex-col flex-justify-center flex-items-center">
    <!-- 博客名字 OR 作者名字 -->
    <div class="gradient-title capitalize text-#000 dark:text-#D8D8D8 text-16px m-b-20px font-700 tracking-1px">『于心博客』</div>
    <!-- 作者头像 -->
    <div
      class="border-1px border-dashed border-[--el-color-primary] w-180px h-180px p-4px rounded-full m-b-15px flex flex-justify-center flex-items-center"
    >
      <el-image
        :src="avatarUrl"
        fit="cover"
        class="user-avatar w-172px h-172px hover:opacity-70 rounded-full transition-all duration-1000 transition-ease-in-out"
      >
        <template #error>
          <el-image :src="errorUrl" fit="contain" class="w-172px h-172px"></el-image>
        </template>
      </el-image>
    </div>
    <!-- 个性签名 -->
    <div class="text-13px p-x-16px text-#000 dark:text-#D8D8D8 text-center m-b-10px line-clamp-3">
      君可愿白衣饮茶，清风瘦马，再听一曲六月雨下。
    </div>
    <!-- 签名 -->
    <div class="m-b-15px">
      <el-image
        :src="signatureUrl"
        fit="cover"
        class="w-100% h-100% hover:opacity-70 transition-all duration-600 transition-ease-in-out"
      >
        <template #error>
          <div class="w-100% h-100%">
            <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
          </div>
        </template>
      </el-image>
    </div>
    <!-- 联系方式 -->
    <div class="flex flex-items-center flex-justify-between w-140px">
      <el-tooltip effect="light">
        <template #content>
          <div class="w-150px h-150px">
            <el-image :src="qqUrl" fit="cover" class="w-150px h-150px">
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-150px h-150px"></el-image>
              </template>
            </el-image>
          </div>
        </template>
        <div
          class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
        >
          <KoiSvgIcon name="koi-qq" width="20" height="20"></KoiSvgIcon>
        </div>
      </el-tooltip>
      <el-tooltip effect="light">
        <template #content>
          <div class="w-150px h-150px">
            <el-image :src="weixinUrl" fit="cover" class="w-150px h-150px">
              <template #error>
                <el-image :src="errorUrl" fit="contain" class="w-150px h-150px"></el-image>
              </template>
            </el-image>
          </div>
        </template>
        <div
          class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
        >
          <KoiSvgIcon name="koi-weixin" width="20" height="20"></KoiSvgIcon>
        </div>
      </el-tooltip>
      <el-tooltip content="网易云" effect="light">
        <div
          class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
          @click="handleWyyUrl"
        >
          <KoiSvgIcon name="koi-wyy" width="20" height="20"></KoiSvgIcon>
        </div>
      </el-tooltip>
      <el-tooltip content="管理平台" effect="light">
        <div
          class="w-30px h-30px rounded-full bg-#BABABA hover:bg-[--el-color-primary] flex flex-items-center flex-justify-center"
          @click="handlePCUrl"
        >
          <KoiSvgIcon name="koi-pc" width="16" height="16"></KoiSvgIcon>
        </div>
      </el-tooltip>
    </div>
  </div>
  <!-- 个人信息 End -->
</template>

<script setup lang="ts">
import errorUrl from "@/assets/images/error/404.png";
import signatureUrl from "@/assets/images/blog/sign.png";

const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";
const qqUrl = "https://picx.zhimg.com/80/v2-c7b2173572c3f71a9dae4f6896fd168d_720w.webp";
const weixinUrl = "https://pic2.zhimg.com/80/v2-455f78af11d6088d6ff71ece430a74c7_720w.webp";

/** 网易云 */
const handleWyyUrl = () => {
  window.open("https://music.163.com", "_blank");
};

/** 后台管理 */
const handlePCUrl = () => {
  window.open("http://117.72.208.215/login", "_blank");
};
</script>

<style scoped></style>
